<template>
	<view class="container">
		<view class="settings-list">
			<!-- 账号设置 -->
			<view class="settings-group">
				<view class="settings-item">
					<text class="item-label">账号与安全</text>
					<text class="arrow">›</text>
				</view>
				<view class="settings-item">
					<text class="item-label">隐私设置</text>
					<text class="arrow">›</text>
				</view>
			</view>
			
			<!-- 通用设置 -->
			<view class="settings-group">
				<view class="settings-item">
					<text class="item-label">消息通知</text>
					<switch :checked="notificationEnabled" @change="toggleNotification" color="#9796B8" />
				</view>
				<view class="settings-item">
					<text class="item-label">深色模式</text>
					<switch :checked="darkModeEnabled" @change="toggleDarkMode" color="#9796B8" />
				</view>
			</view>
			
			<!-- 其他设置 -->
			<view class="settings-group">
				<view class="settings-item">
					<text class="item-label">清除缓存</text>
					<text class="item-value">{{ cacheSize }}</text>
				</view>
				<view class="settings-item">
					<text class="item-label">关于我们</text>
					<text class="arrow">›</text>
				</view>
			</view>
			
			<!-- 退出登录 -->
			<view class="logout-btn" @click="handleLogout">退出登录</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			notificationEnabled: true,
			darkModeEnabled: true,
			cacheSize: '23.5MB'
		}
	},
	methods: {
		toggleNotification(e) {
			this.notificationEnabled = e.detail.value;
		},
		toggleDarkMode(e) {
			this.darkModeEnabled = e.detail.value;
		},
		handleLogout() {
			uni.showModal({
				title: '退出登录',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除登录状态和用户信息
						uni.removeStorageSync('isLoggedIn');
						uni.removeStorageSync('userInfo');
						
						// 返回到我的页面
						uni.navigateBack();
					}
				}
			});
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding: 12px;
}

.settings-group {
	background: #2D2D44;
	border-radius: 12px;
	margin-bottom: 12px;
}

.settings-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid rgba(110, 108, 137, 0.1);
}

.settings-item:last-child {
	border-bottom: none;
}

.item-label {
	color: #9796B8;
	font-size: 15px;
}

.item-value {
	color: #6E6C89;
	font-size: 14px;
}

.arrow {
	color: #6E6C89;
	font-size: 18px;
}

.logout-btn {
	background: #2D2D44;
	color: #FF6B6B;
	text-align: center;
	padding: 15px;
	border-radius: 12px;
	margin-top: 20px;
	font-size: 16px;
}

.logout-btn:active {
	opacity: 0.8;
}
</style> 